<template>
  <div class="task_container flex" @click="sendDetail">
    <div class="item">
      <span>任务名称</span>
      <span>{{ item.name }}</span>
    </div>
    <div class="item">
      <span>预估时间</span>
      <span>{{ item.estimatedTime }}</span>
    </div>
    <div class="item">
      <span>实际时间</span>
      <span>{{ item.actualTime }}</span>
    </div>
    <div class="item" v-if="item.executor">
      <span>执行人</span>
      <img :src="item.executor.avatar" alt="avatar" />
    </div>
    <div class="item">
      <span>优先等级</span>
      <Tendency :level="item.level" :isUp="item.isUp" />
    </div>
    <el-tag class="ml-2" type="success">{{ item.status }}</el-tag>
    <Progressbar :schedule="item.schedule" style="transform: scale(.5);" />

  </div>
</template>

<script setup lang="ts">
import Tendency from '@/components/utils/tendency.vue';
import Progressbar from '@/components/progressbar/index.vue';
import { ITask } from '@/types/project';
defineProps<{ item: ITask }>()
/**
 * 详情页面
 */
function sendDetail() {

}

</script>

<style scoped lang="scss">
.task_container {
  justify-content: space-around;
  padding: 16px 0px;
  box-sizing: border-box;
  align-items: center;
  margin: 15px 0 0;
  border-radius: 10px;
  background-color: white;

  .item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;

    >img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    &:nth-of-type(1) {
      width: 120px;
      color: #91929E;
    }

    span {
      &:nth-of-type(1) {
        font-size: 12px;
        color: #91929E;
      }

      &:nth-of-type(2) {
        font-size: 14px;
        color: #000;
      }
    }
  }

}
</style>